<template>
	<view class="live-payment">

		<!-- 我的缴费部分 -->
		<view class="my-payment">
			<view class="section-header">
				<text class="title">我的缴费</text>
				<text class="manage" @click="managePayments">管理</text>
			</view>

			<!-- 缴费卡片 -->
			<view class="payment-list">
				<view class="payment-card" v-for="(item, index) in myPayments" :key="index"
					@click="goToPaymentDetail(item)">
					<view class="left">
						<view class="icon" :style="{ background: item.iconBg }">
							<u-icon :name="item.icon" color="#fff" size="24"></u-icon>
						</view>
						<view class="info">
							<view class="title-row">
								<text class="title">{{ item.title }}</text>
								<text class="status" v-if="item.status"
									:class="item.status">{{ item.statusText }}</text>
							</view>
							<text class="number">{{ item.account }}</text>
						</view>
					</view>
					<view class="right">
						<u-icon name="arrow-right" color="#999" size="24"></u-icon>
					</view>
				</view>
			</view>
		</view>

		<!-- 新增缴费网格 -->
		<view class="add-payment">
			<view class="section-header">
				<text class="title">新增缴费</text>
				<text class="desc">便捷支付，省心省力</text>
			</view>
			<view class="grid">
				<view class="grid-item" v-for="(item, index) in paymentTypes" :key="index">
					<view class="icon" :style="{ background: item.iconBg }">
						<u-icon :name="item.icon" color="#fff" size="28"></u-icon>
					</view>
					<text>{{ item.name }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 我的缴费数据
				myPayments: [{
						title: '电费',
						account: '07090290009 156****7800',
						icon: 'lightning-bolt',
						iconBg: '#ffa426'
					},
					{
						title: '物业费',
						account: '南航碧桂园小区01栋5单元401 蒋锋',
						icon: 'home',
						iconBg: '#4cd964',
						status: 'warning',
						statusText: '欠费'
					}
				],
				// 新增缴费类型
				paymentTypes: [{
						name: '物业费',
						icon: 'home',
						iconBg: '#4cd964'
					},
					{
						name: '电费',
						icon: 'lightning-bolt',
						iconBg: '#ffa426'
					},
					{
						name: '水费',
						icon: 'water',
						iconBg: '#33a7ff'
					},
					{
						name: '燃气费',
						icon: 'fire',
						iconBg: '#ff6b6b'
					},
					{
						name: '宽带费',
						icon: 'wifi',
						iconBg: '#7a7dff'
					},
					{
						name: '暖气费',
						icon: 'thermometer',
						iconBg: '#ff9500'
					},
					{
						name: '车位费',
						icon: 'car',
						iconBg: '#8e8e93'
					}
				]
			}
		},
		methods: {
			goToPaymentDetail(item) {
				// 根据缴费类型跳转到对应的详情页
				uni.navigateTo({
					url: `/pages/livePayment/paymentDetail?type=${item.title}&account=${item.account}`

				});
			},
			// ... 其他可能存在的 methods
		}
	}
</script>

<style lang="scss" scoped>
	.live-payment {
		min-height: 100vh;
		background: #f5f6fa;
		padding: 20rpx;
	}

	.section-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx 0;

		.title {
			font-size: 32rpx;
			font-weight: 600;
			color: #333;
		}

		.manage,
		.desc {
			font-size: 26rpx;
			color: #999;
		}
	}

	.payment-list {
		.payment-card {
			background: #fff;
			padding: 30rpx;
			border-radius: 16rpx;
			margin-bottom: 20rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);

			.left {
				display: flex;
				align-items: center;

				.icon {
					width: 80rpx;
					height: 80rpx;
					border-radius: 20rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					margin-right: 20rpx;
				}

				.info {
					display: flex;
					flex-direction: column;

					.title-row {
						display: flex;
						align-items: center;
						margin-bottom: 8rpx;

						.title {
							font-size: 30rpx;
							font-weight: 500;
							color: #333;
							margin-right: 12rpx;
						}

						.status {
							font-size: 24rpx;
							padding: 4rpx 16rpx;
							border-radius: 24rpx;

							&.warning {
								background: #fff2f0;
								color: #ff4d4f;
							}
						}
					}

					.number {
						font-size: 26rpx;
						color: #999;
					}
				}
			}

			.right {
				display: flex;
				align-items: center;
			}
		}
	}

	.add-payment {
		margin-top: 40rpx;

		.grid {
			background: #fff;
			border-radius: 16rpx;
			padding: 30rpx;
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			gap: 40rpx 30rpx;

			.grid-item {
				display: flex;
				flex-direction: column;
				align-items: center;

				.icon {
					width: 100rpx;
					height: 100rpx;
					border-radius: 25rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					margin-bottom: 16rpx;
					transition: all 0.3s;

					&:active {
						transform: scale(0.95);
					}
				}

				text {
					font-size: 26rpx;
					color: #333;
				}
			}
		}
	}
</style>